<template>
  <div>
    <el-container>
      <el-page-header :content="'来自「' + file_data.username + '」分享的文件'" />

      <el-header>
        <el-alert title="谨防刷单兼职，网贷，金融，敲诈，赌博等诈骗，请立即举报" type="warning"></el-alert>
      </el-header>
      <el-main>
        <div class="file-content" v-if="isCheckSuccess">
          <svg-icon :name="fileUtils.checkFileType(file_data.fileName)" />
          <p class="file-name">{{file_data.fileName}}</p>
          <p class="file-time">分享于:{{fileUtils.timestampToTime(file_data.shareDate)}}</p>
          <div class="file-download">
            <div class="content">
              <el-row :gutter="20">
                <el-col :span="13" :offset="0">
                  <span>大小:{{fileUtils.fileSizeToStr(file_data.fileSize)}}</span>
                </el-col>
                <el-col :span="4" :offset="0">
                  <el-button
                    type="primary"
                    style=" margin-left: 0;"
                    round
                    @click="share_Download"
                  >下载</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="file-input-pwd" v-if="!isCheckSuccess">
          <el-row :gutter="20">
            <el-col :span="15" :offset="0">
              <el-input placeholder="请输入秘钥" v-model="file_input_pwd" class="input-with-select" />
            </el-col>
            <el-col :span="5" :offset="0">
              <el-button type="primary" @click="share_Input_Pwd">确定</el-button>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
    <el-footer>
      <p>投诉邮箱：zhangsingerw@gmail.com</p>
      <p>© 2021 泉州信息工程学院-教学网盘系统</p>
    </el-footer>
  </div>
</template>

<script>
import { getShare } from '@/api/requests/share'
import { ShareDownload } from '@/api/requests/file'
import fileUtils from '@/util/file'

export default {
  data () {
    return {
      fileUtils,
      isCheckSuccess: false,
      file_input_pwd: '',
      file_share_key: '',
      file_data: {
        username: '未知的神秘人'
      }
    }
  },
  created () {
    let path = this.$route.path
    let key = path.substr(7, path.length)
    this.file_share_key = key
    this.share_Get_Share(key, '0')
  },
  methods: {
    share_Get_Share (key, pwd) {
      getShare(key, pwd).then(res => {
        if (res.code == 200) {
          this.isCheckSuccess = true
          this.file_data = JSON.parse(res.data)
        }
      })
    },
    share_Input_Pwd () {
      this.share_Get_Share(this.file_share_key, this.file_input_pwd)
    },
    share_Download () {
      let pwd = this.file_input_pwd == '' ? '0' : this.file_input_pwd
      ShareDownload(this.file_share_key, this.file_input_pwd).then(res => {
        let type = '/'
        let name = this.file_data.fileName
        if (name.indexOf('.') == -1) {
          name = name.substr(0, name.length - 1) + '.zip'
        }
        fileUtils.download(name, res.data)
      })
    }
  },

}
</script>

<style lang="scss" scoped>
.el-container {
    margin: 10vh 10vw;
    padding: 30px;
    height: 70vh;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .el-alert {
        width: 80%;
        margin: 30px auto;
    }
    .el-main {
        margin: 0 auto;
        text-align: center;
        .svg-icon {
            font-size: 100px;
            margin-top: 30px;
        }
        .file-name {
            font-size: 26px;
            color: #333;
            margin: 0;
        }
        .file-time {
            color: #666;
            font-size: 10px;
            margin: 0;
        }
        .file-download {
            background: #e1e7ea;
            font-size: 12px;
            width: 200px;
            border-radius: 50px;
            height: 50px;
            line-height: 40px;
            margin: 20px auto;
            padding: 0 20px;
            .content {
                line-height: 50px;
                .el-button {
                    margin-left: 10px;
                }
            }
        }
        .file-input-pwd {
            margin-top: 15vh;
            padding: 30px;
            border: 1px solid #ebedf0;
        }
    }
}
.el-footer {
    height: 60px;
    text-align: center;
    font-size: 12px;
    color: rgb(0, 0, 0);
}
</style>
